//顶部可以关闭的广告
var top1 = document.querySelector(".top");
var span1 = document.querySelector(".span1");
span1.onclick = function () {
  top1.style.display = "none";
};
//顶部导航栏移动出现消失
function close(x, y) {
  x.addEventListener("mouseover", function () {
    y.style.display = "block";
  });
  y.addEventListener("mouseover", function () {
    y.style.display = "block";
  });
  x.addEventListener("mouseout", function () {
    y.style.display = "none";
  });
  y.addEventListener("mouseout", function () {
    y.style.display = "none";
  });
}
var my = document.querySelector(".my");
var ul1 = document.querySelector(".ul1");
var enterprise = document.querySelector(".enterprise");
var ul2 = document.querySelector(".ul2");
var client = document.querySelector(".client");
var ul3 = document.querySelector(".ul3");
var navigation = document.querySelector(".navigation");
var top2_2 = document.querySelector(".top2-2");
close(my, ul1);
close(enterprise, ul2);
close(client, ul3);
close(navigation, top2_2);
// 轮播图区域
// 轮播图左
var lps = document.querySelectorAll(".top4-2 p");
var lus = document.querySelectorAll(".top4-2 ul");
for (i = 0; i < lps.length; i++) {
  lps[i].setAttribute("index", i); //将indxe改为i
  lus[i].setAttribute("index", i); //将indxe改为i
  lps[i].onmouseover = function () {
    var index = this.getAttribute("index"); //获取属性值
    lus[index].className = "zi cu";
  };
  lps[i].onmouseout = function () {
    var index = this.getAttribute("index");
    lus[index].className = "zi";
  };
  lus[i].onmouseover = function () {
    var index = this.getAttribute("index"); //获取属性值
    lus[index].className = "zi cu";
  };
  lus[i].onmouseout = function () {
    var index = this.getAttribute("index");
    lus[index].className = "zi";
  };
}
// 轮播图
var swiper = new Swiper(".mySwiper", {
  loop: true,
  spaceBetween: 30,
  centeredSlides: true,
  autoplay: {
    delay: 2500,
    disableOnInteraction: false,
  },
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
    disabledClass: "my-button-disabled",
    hideOnClick: true,
    hiddenClass: "my-button-hidden",
  },
});
//   三格轮播图
var swiper = new Swiper(".swiper-container", {
  loop: true,
  pagination: ".swiper-pagination",
  paginationClickable: ".swiper-pagination",
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  spaceBetween: 30,
});
//倒计时
var itme1 = document.querySelector(".itme1");
var itme2 = document.querySelector(".itme2");
var itme3 = document.querySelector(".itme3");
var preDate = new Date("2023/6/18 10:00:40");
function djs() {
  var nowDate = new Date(); //当前时间
  var ss = (preDate - nowDate) / 1000;
  var h = parseInt((ss / 60 / 60) % 24);
  var m = parseInt((ss / 60) % 60);
  var s = parseInt(ss % 60);
  //console.log(h, m, s);
  //时 分 秒 上面都是两位数
  //补零
  function buling(num) {
    if (num < 10) {
      return "0" + num;
    }
    return num;
  }
  h = buling(h);
  m = buling(m);
  s = buling(s);
  //console.log(h, m, s);
  itme1.innerText = h;
  itme2.innerText = m;
  itme3.innerText = s;
  if (parseInt(ss) <= 0) {
    clearInterval(timer);
    clearInterval(timer);
  }
}
djs(); //立即执行一次
var timer = setInterval(function () {
  djs(); //每隔一秒执行一次
}, 1000);
//   多格轮播图
var swiper = new Swiper(".mySwiper2", {
  autoplay: false,
  loop: true,
  scrollbar: {
    el: ".swiper-scrollbar",
    hide: true,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prsevEl: ".swiper-button-prev",
  },
});
// 两格轮播图
var swiper = new Swiper(".mySwiper3", {
  autoplay: {
    disableOnInteraction: false,
  },
  autoplay: true,
  loop: true,
  spaceBetween: 30,
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
});
// 活动区域
// 特价区域
var everyday = document.querySelectorAll('.everyday');
var ey = document.querySelectorAll('.ey');
for (i = 0; i < everyday.length; i++) {
  everyday[i].setAttribute('index', i)
  everyday[i].addEventListener('mouseover', function () {
    for (j = 0; j < everyday.length; j++) {
      everyday[j].className = 'everyday'
    }
    this.className = 'everyday chop'
    var index = this.getAttribute('index')
    for (i = 0; i < ey.length; i++) {
      ey[i].className = 'ey';
    }
    ey[index].className = 'ey cp'
  })
}
// 发现好货区域
var lis = document.querySelectorAll('.find2 li')
var find = document.querySelector('.find')
for (var i = 0; i < lis.length; i++) {
  lis[i].style.left = i * 200 + 'px';
}

var don = setInterval(function () {
  for (var i = 0; i < lis.length; i++) {
    lis[i].style.left = lis[i].offsetLeft - 1 + 'px';
  }
}
  , 30)
find.addEventListener('mouseover', function () {
  clearTimeout(don)
});
find.addEventListener('mouseout', function () {
 
});
// 发现好货
var nts = document.querySelectorAll('.spa');
var nts2 = document.querySelectorAll('.nts2-2');
for (i = 0; i < nts.length; i++) {
  nts[i].setAttribute('index', i)
  nts[i].addEventListener('mouseover', function () {
    for (j = 0; j < nts.length; j++) {
      nts[j].className = 'spa'
    }
    this.className = 'spa sp'
    var index = this.getAttribute('index')
    for (i = 0; i < nts2.length; i++) {
      nts2[i].className = 'nts2-2';
    }
    nts2[index].className = 'nts2-2 ns'
  })
}
// 为你推荐区
var jx = document.querySelectorAll('.jx');
var zn = document.querySelectorAll('.zn');
var pz = document.querySelectorAll('.pz');
var case1 = document.querySelectorAll('.case');
for (i = 0; i < jx.length; i++) {
  jx[i].setAttribute('index', i)
  jx[i].addEventListener('click', function () {
    var index = this.getAttribute('index')
    for (j = 0; j < zn.length; j++) {
      zn[j].className = 'zn'
    }
    zn[index].className = 'zn hk'
    for (j = 0; j < pz.length; j++) {
      pz[j].className = 'pz'
    }
    pz[index].className = 'pz zk'
    for (j = 0; j < case1.length; j++) {
      case1[j].className = 'case'
    }
    case1[index].className = 'case cs'
  })
}
//数据
// http://jx.xuzhixiang.top/ap/api/allproductlist.php
async function arr() {
  let cartAPI = "http://jx.xuzhixiang.top/ap/api/allproductlist.php"
  let uid = localStorage.getItem("uid")
  console.log(uid);
  let pagesize = 20
  let pagenum = 0
  let params = { uid, pagenum, pagesize }
  let liArr = await axios.get(cartAPI, { params })
  console.log(liArr.data);
  let liBrr = liArr.data.data.map(
    (v) =>
      `
      <div class="case1">
  <a href="detail.html?pid=${v.pid}">
  <img src="${v.pimg}" alt="">
  <p>${v.pname}</p>
  <span class="ps">￥${v.pprice}</span>
  <div class="ding">找相似</div>
  </a>
 </div>
  `
  );
  document.querySelector('.case').innerHTML = liBrr.join('');
 
}
arr()
